<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="是否有效" prop="isActive">
        <el-select v-model="queryParams.isActive" placeholder="请选择是否有效" clearable size="small">
          <el-option
            v-for="dict in isActiveOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="企业应用id" prop="agentId">
        <el-input
          v-model="queryParams.agentId"
          placeholder="请输入企业应用id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接收人" prop="toUserName">
        <el-input
          v-model="queryParams.toUserName"
          placeholder="请输入接收人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="消息类型" prop="msgType">
        <el-select v-model="queryParams.msgType" placeholder="请选择消息类型" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="事件类型" prop="event">
        <el-input
          v-model="queryParams.event"
          placeholder="请输入事件类型"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['lessee:evmessage:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['lessee:evmessage:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['lessee:evmessage:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['lessee:evmessage:export']"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="evmessageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="唯一ID" align="center" prop="id" />
      <el-table-column label="是否有效" align="center" prop="isActive" :formatter="isActiveFormat" />
      <el-table-column label="企业应用id" align="center" prop="agentId" />
      <el-table-column label="接收人" align="center" prop="toUserName" />
      <el-table-column label="发送人" align="center" prop="fromUserName" />
      <el-table-column label="消息类型" align="center" prop="msgType" />
      <el-table-column label="文本消息内容" align="center" prop="content" />
      <el-table-column label="消息id" align="center" prop="msgId" />
      <el-table-column label="图片链接" align="center" prop="picUrl" />
      <el-table-column label="媒体文件id" align="center" prop="mediaId" />
      <el-table-column label="语音格式" align="center" prop="formt" />
      <el-table-column label="视频消息缩略图的媒体id" align="center" prop="thumbMediaId" />
      <el-table-column label="地理位置纬度" align="center" prop="locationX" />
      <el-table-column label="地理位置经度" align="center" prop="locationY" />
      <el-table-column label="地图缩放大小" align="center" prop="scale" />
      <el-table-column label="地理位置信息" align="center" prop="label" />
      <el-table-column label="link消息标题" align="center" prop="title" />
      <el-table-column label="link消息描述" align="center" prop="description" />
      <el-table-column label="事件类型" align="center" prop="event" />
      <el-table-column label="地理位置纬度" align="center" prop="latitude" />
      <el-table-column label="地理位置经度" align="center" prop="longitude" />
      <el-table-column label="地理位置精度" align="center" prop="precision" />
      <el-table-column label="事件KEY值" align="center" prop="eventKey" />
      <el-table-column label="扫描信息" align="center" prop="scanCodeInfo" />
      <el-table-column label="扫描类型" align="center" prop="scanType" />
      <el-table-column label="扫描结果" align="center" prop="scanResult" />
      <el-table-column label="发送的图片信息" align="center" prop="sendPicsInfo" />
      <el-table-column label="发送的图片数量" align="center" prop="count" />
      <el-table-column label="图片列表" align="center" prop="picList" />
      <el-table-column label="图片的MD5值" align="center" prop="picMd5Sum" />
      <el-table-column label="发送的位置信息" align="center" prop="sendLocationInfo" />
      <el-table-column label="朋友圈POI的名字" align="center" prop="poiname" />
      <el-table-column label="事件时间" align="center" prop="eventTime" />
      <el-table-column label="异步任务id" align="center" prop="jobId" />
      <el-table-column label="操作类型" align="center" prop="jobType" />
      <el-table-column label="返回码" align="center" prop="errCode" />
      <el-table-column label="对返回码的文本描述内容" align="center" prop="errMsg" />
      <el-table-column label="导购id" align="center" prop="userId" />
      <el-table-column label="外部联系人id" align="center" prop="externalUserId" />
      <el-table-column label="外部联系人事件类型" align="center" prop="changeType" />
      <el-table-column label="添加此用户的「联系我」方式配置的state参数" align="center" prop="state" />
      <el-table-column label="添加此用户的「联系我」方式配置的state参数" align="center" prop="welcomeCode" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['lessee:evmessage:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['lessee:evmessage:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改企业微信事件对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="是否有效">
          <el-select v-model="form.isActive" placeholder="请选择是否有效">
            <el-option
              v-for="dict in isActiveOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租户id" prop="lesseeId">
          <el-input v-model="form.lesseeId" placeholder="请输入租户id" />
        </el-form-item>
        <el-form-item label="企业应用id" prop="agentId">
          <el-input v-model="form.agentId" placeholder="请输入企业应用id" />
        </el-form-item>
        <el-form-item label="接收人" prop="toUserName">
          <el-input v-model="form.toUserName" placeholder="请输入接收人" />
        </el-form-item>
        <el-form-item label="发送人" prop="fromUserName">
          <el-input v-model="form.fromUserName" placeholder="请输入发送人" />
        </el-form-item>
        <el-form-item label="消息类型">
          <el-select v-model="form.msgType" placeholder="请选择消息类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="文本消息内容" prop="content">
          <el-input v-model="form.content" placeholder="请输入文本消息内容" />
        </el-form-item>
        <el-form-item label="消息id" prop="msgId">
          <el-input v-model="form.msgId" placeholder="请输入消息id" />
        </el-form-item>
        <el-form-item label="图片链接" prop="picUrl">
          <el-input v-model="form.picUrl" placeholder="请输入图片链接" />
        </el-form-item>
        <el-form-item label="媒体文件id" prop="mediaId">
          <el-input v-model="form.mediaId" placeholder="请输入媒体文件id" />
        </el-form-item>
        <el-form-item label="语音格式" prop="formt">
          <el-input v-model="form.formt" placeholder="请输入语音格式" />
        </el-form-item>
        <el-form-item label="视频消息缩略图的媒体id" prop="thumbMediaId">
          <el-input v-model="form.thumbMediaId" placeholder="请输入视频消息缩略图的媒体id" />
        </el-form-item>
        <el-form-item label="地理位置纬度" prop="locationX">
          <el-input v-model="form.locationX" placeholder="请输入地理位置纬度" />
        </el-form-item>
        <el-form-item label="地理位置经度" prop="locationY">
          <el-input v-model="form.locationY" placeholder="请输入地理位置经度" />
        </el-form-item>
        <el-form-item label="地图缩放大小" prop="scale">
          <el-input v-model="form.scale" placeholder="请输入地图缩放大小" />
        </el-form-item>
        <el-form-item label="地理位置信息" prop="label">
          <el-input v-model="form.label" placeholder="请输入地理位置信息" />
        </el-form-item>
        <el-form-item label="link消息标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入link消息标题" />
        </el-form-item>
        <el-form-item label="link消息描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入link消息描述" />
        </el-form-item>
        <el-form-item label="事件类型" prop="event">
          <el-input v-model="form.event" placeholder="请输入事件类型" />
        </el-form-item>
        <el-form-item label="地理位置纬度" prop="latitude">
          <el-input v-model="form.latitude" placeholder="请输入地理位置纬度" />
        </el-form-item>
        <el-form-item label="地理位置经度" prop="longitude">
          <el-input v-model="form.longitude" placeholder="请输入地理位置经度" />
        </el-form-item>
        <el-form-item label="地理位置精度" prop="precision">
          <el-input v-model="form.precision" placeholder="请输入地理位置精度" />
        </el-form-item>
        <el-form-item label="事件KEY值" prop="eventKey">
          <el-input v-model="form.eventKey" placeholder="请输入事件KEY值" />
        </el-form-item>
        <el-form-item label="扫描信息" prop="scanCodeInfo">
          <el-input v-model="form.scanCodeInfo" placeholder="请输入扫描信息" />
        </el-form-item>
        <el-form-item label="扫描类型">
          <el-select v-model="form.scanType" placeholder="请选择扫描类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="扫描结果" prop="scanResult">
          <el-input v-model="form.scanResult" placeholder="请输入扫描结果" />
        </el-form-item>
        <el-form-item label="发送的图片信息" prop="sendPicsInfo">
          <el-input v-model="form.sendPicsInfo" placeholder="请输入发送的图片信息" />
        </el-form-item>
        <el-form-item label="发送的图片数量" prop="count">
          <el-input v-model="form.count" placeholder="请输入发送的图片数量" />
        </el-form-item>
        <el-form-item label="图片列表" prop="picList">
          <el-input v-model="form.picList" placeholder="请输入图片列表" />
        </el-form-item>
        <el-form-item label="图片的MD5值" prop="picMd5Sum">
          <el-input v-model="form.picMd5Sum" placeholder="请输入图片的MD5值" />
        </el-form-item>
        <el-form-item label="发送的位置信息" prop="sendLocationInfo">
          <el-input v-model="form.sendLocationInfo" placeholder="请输入发送的位置信息" />
        </el-form-item>
        <el-form-item label="朋友圈POI的名字" prop="poiname">
          <el-input v-model="form.poiname" placeholder="请输入朋友圈POI的名字" />
        </el-form-item>
        <el-form-item label="事件时间" prop="eventTime">
          <el-input v-model="form.eventTime" placeholder="请输入事件时间" />
        </el-form-item>
        <el-form-item label="异步任务id" prop="jobId">
          <el-input v-model="form.jobId" placeholder="请输入异步任务id" />
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="form.jobType" placeholder="请选择操作类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="返回码" prop="errCode">
          <el-input v-model="form.errCode" placeholder="请输入返回码" />
        </el-form-item>
        <el-form-item label="对返回码的文本描述内容" prop="errMsg">
          <el-input v-model="form.errMsg" placeholder="请输入对返回码的文本描述内容" />
        </el-form-item>
        <el-form-item label="导购id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入导购id" />
        </el-form-item>
        <el-form-item label="外部联系人id" prop="externalUserId">
          <el-input v-model="form.externalUserId" placeholder="请输入外部联系人id" />
        </el-form-item>
        <el-form-item label="外部联系人事件类型">
          <el-select v-model="form.changeType" placeholder="请选择外部联系人事件类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="添加此用户的「联系我」方式配置的state参数" prop="state">
          <el-input v-model="form.state" placeholder="请输入添加此用户的「联系我」方式配置的state参数" />
        </el-form-item>
        <el-form-item label="添加此用户的「联系我」方式配置的state参数" prop="welcomeCode">
          <el-input v-model="form.welcomeCode" placeholder="请输入添加此用户的「联系我」方式配置的state参数" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listEvmessage, getEvmessage, delEvmessage, addEvmessage, updateEvmessage, exportEvmessage } from "@/api/lessee/evmessage";

export default {
  name: "Evmessage",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 企业微信事件表格数据
      evmessageList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否有效字典
      isActiveOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isActive: undefined,
        agentId: undefined,
        toUserName: undefined,
        msgType: undefined,
        event: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("is_active").then(response => {
      this.isActiveOptions = response.data;
    });
  },
  methods: {
    /** 查询企业微信事件列表 */
    getList() {
      this.loading = true;
      listEvmessage(this.queryParams).then(response => {
        this.evmessageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 是否有效字典翻译
    isActiveFormat(row, column) {
      return this.selectDictLabel(this.isActiveOptions, row.isActive);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        createBy: undefined,
        createTime: undefined,
        updateTime: undefined,
        updateBy: undefined,
        isActive: undefined,
        lesseeId: undefined,
        agentId: undefined,
        toUserName: undefined,
        fromUserName: undefined,
        msgType: undefined,
        content: undefined,
        msgId: undefined,
        picUrl: undefined,
        mediaId: undefined,
        formt: undefined,
        thumbMediaId: undefined,
        locationX: undefined,
        locationY: undefined,
        scale: undefined,
        label: undefined,
        title: undefined,
        description: undefined,
        event: undefined,
        latitude: undefined,
        longitude: undefined,
        precision: undefined,
        eventKey: undefined,
        scanCodeInfo: undefined,
        scanType: undefined,
        scanResult: undefined,
        sendPicsInfo: undefined,
        count: undefined,
        picList: undefined,
        picMd5Sum: undefined,
        sendLocationInfo: undefined,
        poiname: undefined,
        eventTime: undefined,
        jobId: undefined,
        jobType: undefined,
        errCode: undefined,
        errMsg: undefined,
        userId: undefined,
        externalUserId: undefined,
        changeType: undefined,
        state: undefined,
        welcomeCode: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加企业微信事件";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getEvmessage(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改企业微信事件";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateEvmessage(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addEvmessage(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除企业微信事件编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delEvmessage(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有企业微信事件数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportEvmessage(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    }
  }
};
</script>